<template>
  <div class="zb-my">
    <div class="tx"><img src="@/assets/images/tx.png" alt=""></div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, computed, reactive } from 'vue';
const htmlShowData = reactive({
  title:'',
  con:'',
  yinsi:'隐私政策隐私政策隐私政策隐私政策隐私政策隐私政策隐私政策隐私政策隐私政策',
  serve:'服务协议服务协议服务协议',
  show:false
})
const htmlShowFun = (e:number) =>{
  console.log('htmlShowFun--', e)
  htmlShowData.title = e == 1 ? '服务协议' : '隐私政策';
  htmlShowData.con = e == 1 ? htmlShowData.serve : htmlShowData.yinsi;
  htmlShowData.show = true;
}


const codetxt = computed(()=>{
  return codeTime.value === 0 ? '获取验证码' : `${codeTime.value}s 后重新获取`
});
const loginType = ref(1); // 登陆方式 1-手机， 2-微信， 3-绑定手机号， 4-完善简历
const loginTypeFun = (e:number) =>{
  loginType.value = e;
  formData.code = '';
  formData.mobile = '';
}
const agree = ref(false)
const curTab = ref('two');
const formData = reactive({
  name:'',
  birthday:'',
  address:'',
  job:'',
  intro:'',
  
  mobile: '',
  code: '',
})
const formRules = {
  mobile: [
    { required: true, message: '请输入账号', trigger: ['change', 'blur'] }
  ],
  code: [
    { required: true, message: '请输入密码', trigger: ['change', 'blur'] }
  ],
}
const codeRun = ref()
const codeTime = ref(0);
const sendMsg = () => {
  const regex = /^1[2-9]\d{9}$/;
  if(!formData.mobile) return ElMessage.error('请输入手机号');
  if(!regex.test(formData.mobile)) return ElMessage.error('手机号格式不正确');
  codeTime.value = 60
  codeRun.value = setInterval(()=>{
    codeTime.value--;
    if(codeTime.value == 0){
      clearInterval(codeRun.value)
    }
  }, 1000)
}
const formRef = ref()
const submit = async () => {
  await formRef.value?.validate();
  clearInterval(codeRun.value);
}
</script>

<style lang="scss" scoped>
$codeW:120px;
$rad:16px;
.zb-my{
  .tx{
    width: 110px; height: 110px; border-radius: 36px;
    img{width: 100%; height: 100%; left: 0; top: 0;}
  }
  .submit-btn{width:100%; height: 50px; border-radius: $rad; font-size: 16px;}
}
@media only screen and (max-width: 769px){
  .info{
    width:100%;border-radius:0px;
    .title{font-size:0.44rem; margin:1rem auto 0.2rem;}
    .submit-btn{margin: 0.2rem 0 0.5rem; height: 1rem; border-radius: 0.32rem; font-size: 0.32rem;}
    .form-tips{line-height: 1;}
    :deep(.el-form-item){
      display: block;
      .el-input{height: auto !important; width: 100%;}
      .el-form-item__label{width: 100% !important; text-align: left; display: block; font-size: 0.32rem;}
      .el-input__inner,.el-textarea{min-height: 1rem;}
      .el-input__wrapper,.el-textarea__inner{border-radius: 0.32rem; background-color: #F7F7F7; box-shadow: none; font-size: 0.32rem;}
      .el-textarea__inner{padding: 10px 15px;}
    }
  }
}
.html-box{margin: -20px -20px 0px; }
.html{max-height: calc(80vh - 50px);}
</style>